<template>
	<view class="flex-col page min-vh-100 bg-theme">
		<view class="px-3 pt-12 position-relative" style="overflow: hidden;">
			<view class="recharge brs-12 d-flex flex-column align-items-center">
				<view class="d-flex align-items-center">
					<image class="img-38" src="../../static/imgs/balance-fill.png" mode=""></image>
					<text class="text-222426 ps-1 font-600">我的余额</text>
				</view>
				<view class="text-theme font-32 font-600 pt-12 pb-12">
					{{balance}}
				</view>
				<view class="w-100 ">
					<button class="button d-flex align-items-center justify-content-center pt-2 bg-theme"
						@click="$u.route({url: 'pages/myCenter/balanceRecharge'})">
						<text style="margin-top: -16rpx;">立即充值</text></button>
				</view>
				<image class="money" src="../../static/imgs/money-gray.png" mode=""></image>
			</view>
		</view>
		<view class="flex-col section_2">
			<view class="group_1">
				<u-tabs active-color="#FFFFFF" bg-color="#D85886" bar-width="112" inactive-color="#F3F3F3"
					font-size="28" :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>

		<!-- 充值明细 -->
		<view class="flex-col  pb-4 pt-12" v-show="current === 0">
			<view class="brs-12 bg-white mx-3 card">
				<template v-if="charge_list.length">
					<view class="text-666D73 font-14 px-3 font-500 border-line" v-for="(v,i) in charge_list" :key="i">
						<view class="text-222426 font-600 pb-2 pt-3">
							<text>金额</text><text class="ps-1">{{v.fee}}元</text>
						</view>
						<view class="pb-2">
							<text>充值时间：</text><text class="font-600">{{v.time|setTime('YYYY-MM-DD HH:mm:ss')}}</text>
						</view>
						<view class="pb-2">
							<text>充值类型：</text><text>{{v.charge_type==1?'微信支付':'系统返还'}}</text>
						</view>
						<view class="pb-2 pb-3">
							<text>订单编号：</text><text>{{v.order_num}}</text><text class="font-bold ps-3 text-theme"
								@click="copy(v.order_num)">复制</text>
						</view>
					</view>
				</template>

				<view class="empty d-flex justify-content-center flex-column align-items-center h-100" v-else>
					<image src="../../static/imgs/empty.png" class="img" />
					<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
				</view>
			</view>
		</view>

		<view class="flex-col  pb-4 pt-12" v-show="current === 1">
			<view class="brs-12 bg-white mx-3 card">
				<template v-if="consume_list.length">
					<view class="text-666D73 font-14 px-3 font-500 border-line" v-for="(v,i) in consume_list" :key="i">
						<view class="text-222426 font-600 pb-2 pt-3">
							<text>消费</text><text class="ps-1">100元</text>
						</view>
						<view class="pb-2">
							<text>使用门店：</text><text class="font-600 text-222426">2{{v.store}}</text>
						</view>
						<view class="pb-2">
							<text>使用教室：</text><text class="font-600 text-222426">{{v.room}}</text>
						</view>
						<view class="pb-2">
							<text>使用时间：</text><text
								class="font-600 text-222426">{{v.reserve_time}}</text>
						</view>
						<view class="pb-2">
							<text>下单时间：</text><text class="font-600">{{v.order_time|setTime('YYYY/MM/DD HH:mm')}}</text>
						</view>
						<view class="pb-2 pb-3">
							<text>订单编号：</text><text>{{v.order_num}}</text><text class="font-bold ps-3 text-theme"
								@click="copy(v.order_num)">复制</text>
						</view>
					</view>
				</template>
				<view class="empty d-flex justify-content-center flex-column align-items-center h-100" v-else>
					<image src="../../static/imgs/empty.png" class="img" />
					<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		topUpDetail,
		useDetail
	} from '../../common/commonData.js';
	export default {
		data() {
			return {
				tabs: [{
						id: 1,
						name: '充值明细'
					},
					{
						id: 2,
						name: '使用明细'
					},
				],
				barStyle: {
					backgroundColor: '#000000',
				},
				balance: 0,
				charge_list: [],
				consume_list: [],
				current: 0,
			};
		},
		onLoad() {
			// uni.hideShareMenu()
			this.$u.api.getUserBalancePage()
				.then(res => {
					this.balance = res.data.balance
					this.charge_list = res.data.charge_list
					this.consume_list = res.data.consume_list
				})
		},
		methods: {
			//tabs
			change(index) {
				this.current = index;
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		.recharge {
			background-color: #F2FAFC;
			padding: 44rpx 72rpx 50rpx;
		}

		.money {
			width: 232rpx;
			height: 232rpx;
			position: absolute;
			right: -20rpx;
			top: -36rpx
		}

		.img-38 {
			width: 56rpx;
			height: 56rpx;
		}

		.button {
			width: 100%;
			color: rgb(255, 255, 255);
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 600;
			border-radius: 40rpx 0 40rpx 40rpx;

			&[disabled]:not([type]) {
				background-color: #AAB5BF !important;
			}
		}

		.card {
			min-height: 60vh;

			.empty {
				padding-top: calc(30vh - 244rpx);
			}

			image {
				width: 288rpx;
				height: 304rpx;
			}

			>view:last-child {
				border: none;
			}
		}
	}
</style>